import React from 'react';
import { Card, Form, Input, Button, Switch, Divider, Space, message } from 'antd';
import { useApp } from '../context/AppContext.jsx';
import { SettingOutlined, ExportOutlined, ReloadOutlined, QuestionCircleOutlined } from '@ant-design/icons';

export default function SettingsPage() {
  const { theme, toggleTheme } = useApp();

  const handleExport = () => {
    // 模拟导出数据
    message.success('数据导出成功（模拟）');
  };

  const handleReset = () => {
    // 模拟重置平台
    message.warning('平台已重置为初始状态（模拟）');
  };

  const handleHelp = () => {
    window.open('https://your-help-docs-url.com', '_blank');
  };

  return (
    <Card
      title={<span><SettingOutlined /> 系统设置</span>}
      style={{ maxWidth: 600, margin: '0 auto', minHeight: 400 }}
      bodyStyle={{ padding: 32 }}
    >
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ platformName: '低代码平台通用' }}
        style={{ marginBottom: 32 }}
      >
        <Form.Item label="平台名称" name="platformName">
          <Input placeholder="请输入平台名称" maxLength={24} />
        </Form.Item>
        <Form.Item label="主题切换">
          <Switch
            checked={theme === 'dark'}
            checkedChildren="深色"
            unCheckedChildren="浅色"
            onChange={toggleTheme}
          />
        </Form.Item>
      </Form>
      <Divider />
      <Space size="large">
        <Button icon={<ExportOutlined />} onClick={handleExport} type="primary">导出平台数据</Button>
        <Button icon={<ReloadOutlined />} onClick={handleReset} danger>重置平台</Button>
        <Button icon={<QuestionCircleOutlined />} onClick={handleHelp}>帮助文档</Button>
      </Space>
      <div style={{ color: '#888', marginTop: 32, fontSize: 13 }}>
        仅管理员可见。平台设置包括名称、主题、数据导出、重置、帮助等功能。
      </div>
    </Card>
  );
} 